<!--
 * @Author: boyyang
 * @Date: 2022-01-08 23:32:35
 * @LastEditTime: 2022-02-19 22:28:18
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\home\components\homeMenuBottom.vue
-->

<template>
    <div class="menu-bottom">
        <template v-for="(item, i) in props.icons" :key="i">
            <home-menu-bottom-item
                :iconName="item.iconName"
                :iconSize="item.iconSize"
                :iconColor="item.iconColor"
                :tag="i"
                hoverColor="#1bd1a5"
                @iconClick="iconClick"
            ></home-menu-bottom-item>
        </template>
    </div>
</template>

<script lang="ts" setup>
import homeMenuBottomItem from './homeMenuBottomItem.vue'
interface IHomeMenuBottomItemProps {
    iconName?: string;
    iconColor?: string;
    iconSize?: string | number;
    hoverColor?: string;
    tag?: any
}
interface IHomeMenuBottomProps {
    icons?: IHomeMenuBottomItemProps[];
    hoverBg?: string;
}

interface IHomeMenuBottomEmits {
    (e: 'iconClick', tag: any): void
}

const props = withDefaults(defineProps<IHomeMenuBottomProps>(), {
    hoverBg: 'rgb(0, 0, 0, 0.8)'
})

const emits = defineEmits<IHomeMenuBottomEmits>()

const iconClick = (e: any) => {
    emits('iconClick', e)
}

</script>

<style scoped lang="scss">
.menu-bottom {
    width: 80%;
    // height: 20%;
    background-color: #3d3b4f;
    border-radius: 10px;
    // position: absolute;
    // bottom: 5%;
    margin-top: 10px;
    padding: 20px 0;
    display: grid;
    grid-template-rows: repeat(v-bind("props?.icons?.length"), 1fr);
    justify-items: center;
    align-items: center;

    grid-row-gap: 15px;

    .icon-bottom {
        font-size: 20px;
        color: whitesmoke;
        margin: 15px;
    }

    .icon-bottom2 {
        font-size: 24px;
        color: whitesmoke;
    }
}
</style>
